<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<% String basePath = request.getContextPath(); %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <title>国台会务系统</title>
	    <meta name="description" content="">
	    <meta name="keywords" content="index">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta name="renderer" content="webkit">
	    <meta http-equiv="Cache-Control" content="no-siteapp" />
	    <link rel="icon" type="image/png" href="<%=basePath%>/resources/assets/i/favicon.png">
	    <link rel="apple-touch-icon-precomposed" href="<%=basePath%>/resources/assets/i/app-icon72x72@2x.png">
	    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
	    <script src="<%=basePath%>/resources/assets/js/charts/echarts.min.js"></script>
	    <link rel="stylesheet" href="<%=basePath%>/resources/assets/css/amazeui.min.css" />
	    <link rel="stylesheet" href="<%=basePath%>/resources/assets/css/amazeui.datatables.min.css" />
	    <link rel="stylesheet" href="<%=basePath%>/resources/assets/css/app.css">
	    <link href="<%=basePath%>/resources/css/mui/mui.min.css" rel="stylesheet" />
	    <script  src="<%=basePath%>/resources/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
	    <style type="text/css">
	    	.theme-white .tpl-table-black thead > tr > th {
			  font-size: 12px;
			  padding: 1px;
			}
			.theme-white .tpl-table-black tbody > tr > td {
			  font-size: 12px;
			  padding: 4px 3px;
			}
			
	    </style>
	    
	</head>
	
<body data-type="widgets">
    <script src="<%=basePath%>/resources/assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <!-- logo -->
            <!-- 右侧内容 -->
                <!-- 侧边切换 -->
                <!-- 搜索 -->
                <!-- 其它功能-->
                <div class="am-fr tpl-header-navbar">
                    <ul>
                        <!-- 欢迎语 -->
                        <li class="am-text-sm tpl-header-navbar-welcome">
                            <a href="javascript:;">欢迎你, <span>${users.realName}</span> </a>
                        </li>

                        <!-- 新邮件 -->

                        <!-- 新提示 -->

                        <!-- 退出 -->
                        <li class="am-text-sm">
                            <a href="javascript:;" id="logout">
                                <span class="am-icon-sign-out"></span> 退出
                            </a>
                        </li>
                    </ul>
                </div>
        </header>
        <!-- 风格切换 -->
        <!-- 侧边导航栏 -->


        <!-- 内容区域 -->
        <div class="">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">会务人员列表</div>
                            </div>
                            <input type="hidden" id="userId" value="${user.userId}"/>
                            <div class="widget-body  am-fr">

                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                    <div class="am-form-group">
                                        <div class="am-btn-toolbar">
                                            <div class="am-btn-group am-btn-group-xs">
                                                <button type="button"  onclick="addUserPage()" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</button>
                                                <!-- <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 添加议程 </button> -->
                                                <button type="button" class="am-btn am-btn-default am-btn-warning" onclick="agendaInfo()" style="margin-left: 10px;"><span class="am-icon-archive"></span>
                                                 	<c:if test="${empty agenda.agendaId }">
                                                 		添加议程
                                                 	</c:if>	
                                                 	<c:if test="${not empty agenda.agendaId }">
                                                 		议程	
                                                 	</c:if>	
                                                 			
                                                 </button>
                                                 <button type="button" class="am-btn am-btn-default am-btn-danger" style="margin-left: 10px;" onclick="exportExcel();"><span class="am-icon-cloud-download"></span> 导出</button> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                        <input type="text" class="am-form-field " id="search"  placeholder="用户名，所属公司">
                                        <span class="am-input-group-btn">
								            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button" onclick="searchData(1);"></button>
								        </span>
                                    </div>
                                </div>

                                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                                    <table class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                        <thead>
                                            <tr>
                                                <th>用户名</th>
                                                <th>姓名</th>
                                                <th>性别</th>
                                                <th>所属公司</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="content">
										<%-- <c:forEach var="user" items="${listUser}" varStatus="us">
											<c:if test="${us.index%2==1}">
										    	<tr class="gradeX">
											</c:if>
											<c:if test="${us.index%2==0}">
										    	<tr class="even gradeC">
											</c:if>
	                                                <td>${user.userName}</td>
	                                                <td>${user.realName}</td>
	                                                <td>
	                                                  <c:if test="${user.sex==1 }">男 </c:if> 
	                                                  <c:if test="${user.sex==0 }">女 </c:if> 
	                                                </td>
	                                                <td>${user.company}</td>
	                                                <td>
	                                                    <div class="tpl-table-black-operation">
	                                                        <a href="javascript:;" onclick="editUser('${user.userId}')">
	                                                            <i class="am-icon-pencil"></i> 编辑
	                                                        </a>
	                                                        <a href="javascript:;" class="tpl-table-black-operation-del" onclick="deleteUser('${user.userId}')">
	                                                            <i class="am-icon-trash"></i> 删除
	                                                        </a>
	                                                    </div>
	                                                </td>
	                                            </tr>
											</c:forEach> --%>
                                        
                                            <!-- more data -->
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="am-u-lg-12 am-cf">
                                    <div class="am-fr">
                                        <ul class="am-pagination tpl-pagination"  id="foot"></ul>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="<%=basePath%>/resources/assets/js/app.js"></script>
    <script src="<%=basePath%>/resources/assets/js/amazeui.min.js"></script>
    <script src="<%=basePath%>/resources/assets/js/amazeui.datatables.min.js"></script>
    <script src="<%=basePath%>/resources/assets/js/dataTables.responsive.min.js"></script>
	<script src="<%=basePath%>/resources/js/mui/mui.min.js"></script>
	
    <script type="text/javascript">
	    $(function () {
	    	searchData(1);
	    })
	    
	    //导出Excel
	    function exportExcel(){
	    	window.top.location.href = "${ctx}/excel/exportExcel";
	    }
    	//搜索功能
 		function searchData(pageIndex){
    	   var total = 0;
    	   var pageSize = 0;
	   	   var searchVal = $("#search").val();
	   	   var html = "";
	   	   mui.ajax('${ctx}/userSystem/searchUser',{
				data:{"search":searchVal,"pageIdex":pageIndex},
				dataType:'json',
				type:'post',
				async:false,
				success:function(data){
					for (var i = 0; i < data.length; i++) {
						var user = data[i];
						if(i%2==0){
							html = html+"<tr class='gradeX'>";
						}else{
							html = html+"<tr class='even gradeC'>";
						}
						html+="<td>"+user.userName+"</td>";
						html+="<td>"+user.realName+"</td>";
						if(user.sex==0){
							html+="<td>女</td>";
						}else if(user.sex==1){
							html+="<td>男</td>";
						}
						html+="<td>"+user.company+"</td>";
						
						html+="<td><div class='tpl-table-black-operation'><a href='javascript:;' onclick='editUser(\""+user.userId+"\")'> <i class='am-icon-pencil'></i> 编辑 </a> <a href='javascript:;' class='tpl-table-black-operation-del' onclick='deleteUser(\""+user.userId+"\")'><i class='am-icon-trash'></i> 删除</a></div></td>";
						html+="</tr>";
						
						total = user.total;
						pageSize = user.pageSize;
					}
					console.log(html);
					var len = Math.ceil(total/pageSize);
					var footHtml = "";
					var prePage = parseFloat(pageIndex)-1;
					if(parseFloat(pageIndex) < 2){
						footHtml += "<li class='am-disabled'><a>«</a></li>";
					}else{
						footHtml += "<li onclick='searchData(\""+prePage+"\")'><a>«</a></li>";
					}
					for(var i = 1;i<len+1;i++){
						if(i>5){
							footHtml+="<li><a>...</a></li>";
							break;
						}
						
						if(i == pageIndex){
							footHtml+="<li class='am-active' onclick='searchData(\""+i+"\")'><a>"+i+"</a></li>";
						}else{
							footHtml+="<li  onclick='searchData(\""+i+"\")'><a >"+i+"</a></li>";
						}
						
					}
					var pageNext=parseFloat(pageIndex)+1;
					if(len == pageIndex){
						footHtml+=" <li class='am-disabled' onclick='searchData(\""+parseFloat(pageIndex)+"\")'><a>»</a></li>";
					}else{
						footHtml+=" <li onclick='searchData(\""+pageNext+"\")'><a>»</a></li>";
					}
					$("#content").html(html);
					$("#foot").html(footHtml);
				}
			}); 
	    }
	   
    	
	    //退出登录功能
	    $("#logout").click(function(){
	    	 var btnArray = ['否', '是'];
	    	 mui.confirm('确定退出登录吗？', '提示', btnArray, function(e) {
                 if (e.index == 1) {
                	 window.top.location.href = "${ctx}/userSystem/logOut";
                 }
             })
	    })
	    
	    //议程功能
	    function agendaInfo(){
	    	var agendaId = '${agenda.agendaId }';
	    	
	    	if('' !== agendaId){
	    		window.top.location.href = "${ctx}/agenda/homePage";
	    	}else{
		    	window.top.location.href = "${ctx}/agenda/agendaPage";
	    	}
	    }
	    /* function addPage(){
	    	window.top.location.href = "${ctx}/userSystem/editPage?userId="+userId;
	    } */
	    
	    //编辑功能
	    function editUser(userId){
	    	window.top.location.href = "${ctx}/userSystem/editPage?userId="+userId;
	    }
	    
	    //编辑功能
	    function addUserPage(){
	    	window.top.location.href = "${ctx}/userSystem/addUserPage";
	    }
	    
	    
	    //删除功能
	    function deleteUser(userId){
	    	 var btnArray = ['否', '是'];
	    	 var usersId = '${users.userId}';
	    	 if(usersId===userId){
	    		 mui.toast('不能删除自己账户！'); 
	    	 }else{
	             mui.confirm('删除将不可恢复，确认？', '提示', btnArray, function(e) {
	                 if (e.index == 1) {
	                	 mui.ajax('${ctx}/userSystem/deleteUser',{
	  						data:{"userId":userId},
	  						dataType:'json',
	  						type:'post',
	  						async:false,
	  						success:function(data){
	  							if(data == 1){
	  								 mui.toast('删除成功'); 
	  								//window.top.location.href = "${ctx}/userSystem/registerPage";
	  								 window.location.reload();
	  							 }else{
	  								 mui.alert("网络错误，删除失败！",'提示');
	  							 }
	  						}
	  					}); 
	                 }
	             })
	    	 }
	    }
    </script>	    

	</body>
</html>
